<template>
  <!--  -->
  <div class='footer' id="footer">
    <div class="wrap">
      <div class="nav">
        <div class="nav-list">
          <div class="product">
            <div class="nav-title font-text-tip">产品</div>
            <div class="nav-item font-text-details" v-for="item in productList">
              {{ item }}
            </div>
          </div>
          <div class="company">
            <div class="nav-title font-text-tip">公司</div>
            <div class="nav-item font-text-details" v-for="item in companyList">
              {{ item }}
            </div>
          </div>
          <div class="concat-us">
            <div class="nav-title font-text-tip">联系我们</div>
            <div class="nav-item font-text-details" v-for="item in concatUs">
              {{ item }}
            </div>
          </div>
        </div>
        <div class="nav-concat-us font-text-details">
          <div>深圳市果酱盒子科技有限公司|电话：121838271923</div>
          <div>深圳市南山区粤海街道深圳湾生态科技园10A栋</div>
        </div>
      </div>
      <div class="concat-us font-text-details">
        <div>扫码添加专属运营顾问，1V1为您提供售前咨询服务</div>
        <div class="more">更多优惠信息，请扫码</div>
        <img class="concat-us-img" src="../assets//images/concat-qrCode.jpg">
      </div>
    </div>
  </div>
</template>
 
<script setup>
// import { defineComponent } from '@vue/composition-api'
import { ref } from 'vue';

const productList = ref(['果酱盒子', '放心学', '赋能平台']);
const companyList = ref(['公司概况', '发展历程', '新闻动态', '加入我们']);
const concatUs = ref(['电话：400-2347218471', '招商加盟：139-13192322', '商务合作：138-231417983']);

</script>
 
<style lang='scss' scoped>
.footer {
  width: 100%;
  height: 434px;
  background: #1D1C1C;

  .wrap {
    width: 1360px;
    box-sizing: border-box;
    padding: 82px 30px 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .nav {
      height: 330px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .nav-list {
        display: flex;

        &>div {
          margin-right: 120px;

          .nav-title {
            font-size: 24px;
            color: #fff;
            margin-bottom: 20px;
          }

          .nav-item {
            color: #C1C1C1;
            cursor: pointer;
            padding: 8px 0;
            font-size: 18px;

            &:hover {
              color: #fff;
            }
          }
        }
      }

      .nav-concat-us {
        line-height: 34px;
        color: #C1C1C1;
      }
    }

    .concat-us {
      font-size: 24px;
      color: #fff;

      .more {
        margin: 20px 0 52px;
      }

      .concat-us-img {
        width: 118px;
        height: 118px;
      }
    }
  }

}
</style>